
{% extends 'admin/change_list.html' %}
{% load staticfiles %}
{% block content_title %}
    <!-- ECharts单文件引入 -->
    <script src="{% static 'echart/dist/echarts.min.js' %}"></script>
    <script src="echart/dist/echarts.js"></script>
{% endblock %}
 
{% block result_list %}
    
    <div id="mains" style="height:400px; width: 1000px;"></div>
    <script>
        let myChart = echarts.init(document.getElementById('mains'));
        let data1 = [];
        let data2 = [];
        let data3 = [];
        let day = [];
        {% for i in date %}
            data1.push({{ i.cpu_count }});
            data2.push({{ i.gpu_count }});
            data3.push({{ i.mem_count }});
            day.push({{ i.days }});
        {% endfor %}
 
        myChart.setOption({
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
 
            title: {
                text: 'CPU 性能参数'
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['CPU性能参数', 'GPU性能参数']
            },
 
            xAxis: [
                {
                    type: 'category',
                    data: day
                }
            ],
            yAxis: [
                {
                    type: 'value',
                }
            ],
 
            series: [
                {
                    name: 'CPU性能参数',
                    type: 'bar',
                    data: data1,
                    markPoint: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                {
                    name: 'GPU性能参数',
                    type: 'bar',
                    data: data2,
                    markPoint: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                {
                    name: '内存性能参数',
                    type: 'bar',
                    data: data3,
                    markPoint: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                {
                    name: '通道参数',
                    type: 'bar',
                    data: data1,
                    markPoint: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
            ]
        });
 
    </script>

{% endblock %}
